import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";

import { Button, ButtonProps } from "./StorybookExample";

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: "Example/StorybookExample",
  component: Button,
} as ComponentMeta<typeof Button>;

// 一、纯函数story
// 只控制peview渲染，必须是函数组件
// 对于无法提供完整依赖预览的组件可使用其他标签替代export const Default = () => <label/>;
export const Default = (args: ButtonProps) => {
  return <Button {...args} text="Default"></Button>;
};

// 设置不同场景的story
export const Story = (args: ButtonProps) => {
  return <Button {...args} text="Story"></Button>;
};

// 二、可复用模板
// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof Button> = (args) => (
  <Button
    {...{
      ...args,
      text: `template-${args.text}`,
    }}
  />
);

export const TemplateStory = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
TemplateStory.args = {
  text: "story",
};
